<script setup>
import {ref ,onMounted ,computed} from 'vue'

//当前选中的标签
const currentTab = ref('all')

//从本地获取请假记录
const leaveRecords = ref([])

onMounted(()=>{
  const records = uni.getStorageSync('leaveRecords') ||[];
  leaveRecords.value = records
})


//根据标签筛选请假记录
const filteredLeaves = computed(()=>{
  if (currentTab.value === 'all'){
    return leaveRecords.value
  }
  return leaveRecords.value.filter(item => item.status === currentTab.value)
})
//切换标签
const switchTab = (tab)=>{
  currentTab.value = tab
}

// 获取状态对应的样式类
const getStatusClass = (status) => {
  switch (status) {
    case 'pending':
      return 'status_pending';
    case 'approved':
      return 'status_approved';
    case 'rejected':
      return 'status_rejected';
    case 'waitingCancel':
      return 'status_waiting_cancel';
    default:
      return '';
  }
}
//获取状态对应的文本
const getStatusText = (status) =>{
  switch (status){
    case 'pending':
      return '审批中'
    case 'approved':
      return '审批通过 已销假'
    case 'rejected':
      return '待销假'
    default:
      return ''
  }
}
//撤销请假申请
const cancelApplication = (recordId)=>{
  //直接移除记录
  const index = leaveRecords.value.findIndex(record => record.id === recordId)
  if (index !== -1) {
    leaveRecords.value.splice(index, 1);

    // 更新本地存储
    uni.setStorageSync('leaveRecords', leaveRecords.value);

    // 更新计数
    const myLeaveCount = leaveRecords.value.length;
    uni.setStorageSync('myLeaveCount', myLeaveCount);

    // 显示简化的提示信息
    uni.showToast({
      title: '请假记录已删除',
      icon: 'success'
    });
  }
}
const navigateBack = ()=>{
  uni.navigateBack();
}
</script>

<template>
<view class="container">

<!--  状态筛选-->
  <view class="filter_tabs">
    <view class="tab_item" :class="{ active: currentTab === 'all' }" @click="switchTab('all')">全部</view>
    <view class="tab_item" :class="{ active: currentTab === 'pending' }" @click="switchTab('pending')">审批中</view>
    <view class="tab_item" :class="{ active: currentTab === 'approved' }" @click="switchTab('approved')">审批通过</view>
    <view class="tab_item" :class="{ active: currentTab === 'rejected' }" @click="switchTab('rejected')">审批拒绝</view>
    <view class="tab_item" :class="{ active: currentTab === 'waitingCancel' }" @click="switchTab('waitingCancel')">待销假</view>
  </view>

<!--  请假记录列表-->
  <view class="leave_list">
    <view v-for="(item,index) in filteredLeaves" :key="item.id" class="leave_item">
      <view class="leave_header">
        <text class="apply_time">today</text>
      </view>
      <view class="leave_content">
        <view class="leave_info">
          <text class="info_label">申请时间：</text>
          <text class="info_value">{{item.applyTime}}</text>
        </view>
        <view class="leave_info">
          <text class="info_label">请假类型：</text>
          <text class="info_value">{{item.type}}</text>
        </view>
        <view class="leave_info">
          <text class="info_label">开始时间：</text>
          <text class="info_value">{{item.startTime}}</text>
        </view>
        <view class="leave_info">
          <text class="info_label">结束时间：</text>
          <text class="info_value">{{item.endTime}}</text>
        </view>
      </view>
      <view class="leave_footer">
        <text :class="getStatusClass(item.status)" class="status_text">{{getStatusText(item.status)}}</text>
<!--        撤销-->
        <text class="cancel_btn" @click="cancelApplication(item.id)">撤销申请</text>
      </view>
    </view>

  </view>
</view>
</template>

<style scoped>
.container{
  padding-bottom: 20px;
}
.filter_tabs{
  display: flex;
  background-color: white;
  border-bottom: 1rpx solid #eee;
  padding: 0 20rpx;
}
.tab_item{
  flex: 1;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}
.tab_item.active{
  color: #2f5496;
}
.leave_list{
  padding: 20px;
}
.leave_item {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.leave_header {
  margin-bottom: 20rpx;
}
.apply_time {
  font-size: 28rpx;
  color: #999;
}
.leave_content {
  margin-bottom: 20rpx;
}
.leave_info {
  display: flex;
  margin-bottom: 16rpx;
}
.info_label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
}
.info_value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}
.leave_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status_text {
  font-size: 28rpx;
}
.status_pending {
   color: #ff9500;
 }
.status_approved {
  color: #52c41a;
}
.status_rejected {
  color: #f5222d;
}
.status_waiting-cancel {
  color: #1890ff;
}
.cancel_btn {
  font-size: 28rpx;
  color: #f5222d;
  border: 2rpx solid #f5222d;
  padding: 8rpx 24rpx;
  border-radius: 20rpx;
}


</style>